<template>
  <div>
    <!--  面包屑导航 -->
    <el-bread></el-bread>
    <!-- 添加按钮 -->
    <el-button @click="add" type="primary" plain size="small">添加</el-button>
    <!-- 表格列表 -->
    <v-list @edit='edit'></v-list>
    <!-- 弹框 -->
    <v-dialog ref="diaInfo" @cancel="cancel" :dialogInfo="dialogInfo"></v-dialog>
  </div>
</template>

<script>
import vList from "./list";
import vDialog from "./dialog";
export default {
  data() {
    return {
      dialogInfo: {
        isShow: false, //用于控制子组件弹框的显示隐藏
        isAdd: true, //是否是添加
      },
    };
  },
  components: {
    vList,
    vDialog,
  },
  methods: {
    //封装一个打开弹框事件
    add() {
      this.dialogInfo.isShow = true;
      this.dialogInfo.isAdd = true;
    },
    //关闭弹框事件
    cancel(e) {
      this.dialogInfo.isShow = e;
    },
    //编辑打开弹框
    edit(e){
      this.dialogInfo.isShow = true;
      this.dialogInfo.isAdd = false;
      this.$refs.diaInfo.lookup(e)
    }
  },
};
</script>

<style lang="stylus" scoped>
.el-button
  margin 20px 5px
</style>